<template>
  <div class="jm-workflow-detail">
    <topbar
      v-if="recordDetail.project"
      :project="recordDetail.project"
      :session="session"
      :entry="entry"
      @jump="groupId=>$emit('jump', groupId)"
      @back="$emit('back')"
      @logout="$emit('logout')"
      @trigger="trigger"
    />
    <record-list
      ref="recordList"
      v-if="recordDetail.project"
      :param="param"
      :project="recordDetail.project"
      @change-record="handleChangeRecord"
    />
    <record-info
      v-if="recordDetail.record && modelValue.viewMode===ViewModeEnum.GRAPHIC"
      :record="recordDetail.record"
      @terminate="terminate"
    />
    <log-toolbar
      v-if="recordDetail.project && recordDetail.record"
      :entry="entry"
      :showLogBtn="recordDetail.record.status!==''"
      :showParamBtn="globalParamBtn"
      :dslType="recordDetail.project.dslType"
      :dslMode="modelValue.viewMode === ViewModeEnum.YAML"
      @click-param-log="openParamLog"
      @click-process-log="openProcessLog"
    />
    <graph-panel
      ref="graphPanel"
      v-if="recordDetail.record"
      :entry="entry"
      :record="recordDetail.record"
      :currentRecordStatus="recordList.currentRecordStatus"
      :viewMode="modelValue.viewMode"
      @has-global-param="bool=>globalParamBtn=bool"
      @change-view-mode="handleChangeDslMode"
      @trigger-refresh="recordList.refreshSuspended()"
    />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, PropType, ref } from 'vue';
import { IWorkflowExecutionRecordVo } from '@/api/dto/workflow-execution-record';
import { IWorkflowDetailParam, IRecordDetail, IRecordListParam } from './model/data/common';
import Topbar from './layout/top/topbar.vue';
import RecordList from './layout/main/record-list.vue';
import RecordInfo from './layout/main/record-info.vue';
import LogToolbar from './layout/main/log-toolbar.vue';
import GraphPanel from './layout/main/graph-panel.vue';
import { ISessionVo } from '@/api/dto/session';
import { ViewModeEnum } from '@/api/dto/enumeration';
import { fetchProjectDetail } from '@/api/view-no-auth';
import { IProjectDetailVo } from '@/api/dto/project';
import sleep from '@/utils/sleep';

export default defineComponent({
  name: 'jm-workflow-detail',
  components: { Topbar, RecordList, RecordInfo, GraphPanel, LogToolbar },
  props: {
    modelValue: {
      type: Object as PropType<IWorkflowDetailParam>,
      required: true,
    },
    session: Object as PropType<ISessionVo>,
    entry: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['back', 'jump', 'update:model-value', 'logout', 'trigger'],
  setup(props, { emit }) {
    const recordDetail = ref<IRecordDetail>({});
    // list组件需要的参数
    const param =  computed(():IRecordListParam => ({
      workflowRef: recordDetail.value.project?.workflowRef || '',
      triggerId: props.modelValue.triggerId,
    }));
    // record-list.vue组件
    const recordList = ref<any>();
    // graph-panel.vue组件
    const graphPanel = ref<any>();
    //  全局参数按钮
    const globalParamBtn = ref<boolean>(false);
    onMounted(async ()=>{
      // 获取项目详情
      recordDetail.value.project = await fetchProjectDetail(props.modelValue.projectId);
    });

    return {
      recordDetail,
      recordList,
      graphPanel,
      param,
      globalParamBtn,
      ViewModeEnum,
      handleChangeRecord(record: IWorkflowExecutionRecordVo) {
        const { name: projectGroupName, triggerId } = record;
        // entry -> false 建木CI的topbar 更改项目名
        if (!props.entry) {
          recordDetail.value.project = {
            ...recordDetail.value.project,
            projectGroupName,
          } as IProjectDetailVo;
        }
        // record-info 修改实例信息 graph-panel组件会随record变化而请求数据
        recordDetail.value.record = record;
        // record-list 同步modelValue数据/地址栏
        emit('update:model-value', { ...props.modelValue, triggerId });
      },
      // ui/src/components/workflow/workflow-detail
      handleChangeDslMode(viewMode: ViewModeEnum) {
        // graph-panel 同步modelValue数据/地址栏
        emit('update:model-value', { ...props.modelValue, viewMode });
      },
      trigger(msg: any) {
        // undefined 触发成功之后刷新record列表 msg -> undefined为成功
        if(!msg) {
          recordList.value.refreshRecordList();
          emit('trigger', msg);
          setTimeout(() => {
            graphPanel.value.refreshGraphPanel();
            // TODO 触发之后第一时间task为0 导致不能进入状态实时更新(延后500毫秒)
          }, 500);
        }
      },
      async terminate() {
        // 终止成功之后刷新列表
        recordList.value.refreshRecordList();
        setTimeout(() => {
          // 终止成功之后刷新graph
          graphPanel.value.refreshGraphPanel();
          // TODO 终止之后第一时间有时候 task对应状态没有改变(延后200豪秒)
        }, 200);
      },
      // 打开全局参数弹窗
      openParamLog() {
        graphPanel.value.openParamLog();
      },
      // 打开日志参数弹窗
      openProcessLog() {
        graphPanel.value.openProcessLog();
      },
    };
  },
});
</script>

<style lang="less">
.jm-workflow-detail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
</style>
